<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
      <div class="account-settings-info-main">
        <a-tabs tabPosition="left" @change="onChange" style="width: 100%">
          <a-tab-pane v-for="item in items" :key="item.key" :tab="item.title">
            <div class="account-settings-info-right">
              <div class="account-settings-info-title">
                <span>{{ activeTitle }}</span>
              </div>
              <keep-alive>
                <component :is="item.key" />
              </keep-alive>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import security from './security/Security'
  import baseSetting from './basesetting/BaseSetting'
  import custom from './custom/Custom'
  import notification from './notification/Notification'
  import binding from './binding/Binding'
  export default {
    name: 'SettingIndex',
    components: {
      security,
      baseSetting,
      custom,
      notification,
      binding
    },
    data() {
      return {
        activeTitle: '基本设置',
        items: [{
          key: "base-setting",
          title: "基本设置"
        },{
          key: "security",
          title: "安全设置"
        },{
          key: "custom",
          title: "个性化"
        },{
          key: "binding",
          title: "账户绑定"
        },{
          key: "notification",
          title: "我的消息"
        }]
      }
    },
    methods: {
      onChange(activeKey) {
        const activeTab = this.items.filter(item => {return activeKey == item.key})[0]
        this.activeTitle = activeTab ? activeTab.title : '基本设置'
      }
    }
  }
</script>

<style lang="less">
  .account-settings-info-main {
    width: 100%;
    display: flex;
    height: 100%;
    overflow: auto;

    .ant-tabs .ant-tabs-left-bar .ant-tabs-tab {
      width: 180px;
      text-align: left;
      height: 40px;
      &.ant-tabs-tab-active {
        background-color: #f0f5ff;
      }
    }

    .account-settings-info-right {
      flex: 1 1;
      padding: 8px 40px;
      width: calc(100% - 224px);

      .account-settings-info-title {
        color: rgba(0, 0, 0, .85);
        font-size: 20px;
        font-weight: 500;
        line-height: 28px;
        margin-bottom: 12px;
      }

      .account-settings-info-view {
        padding-top: 12px;
      }
    }
  }
</style>
